/*
 * @componentName: 
 * @待处理问题: 
 * @已处理问题: 
 * @Author: 舒克
 * @Official Accounts: 氧化1028
 * @email: 143587623@qq.com
 * @github: https://gitee.com/KingSio
 * @Date: 2021-03-29 19:51:59
 * @LastEditTime: 2021-03-29 20:38:41
 * @FilePath: \源码记录\Vue3\开始\1.vue2.0简单实现原理.js
 */
/* 
1.响应式原理
2.数据变化》视图更新

*/

//1.先初始化一个对象

let data={
    name:"小明",
    age:{
        n:"100岁"
    }
}
observer(data);//观察数据是否变化
//2.重新赋值改变数据
//a:单层数据
// data.name="小红"
// console.log("更新数据成功："+data.name);

//b:多层数据，改变value值的
//data.age.n="200岁"
//console.log("更新数据成功："+data.age.n);

//c:多层数据，改变整个对象的
data.age={n:"668岁"}
console.log("更新数据成功："+data.age);
//2.观察数据是否变化，，，tag是要重新改变的值，但是要判断是否是对象
function observer(tag){
    if(typeof tag!=="object" ||tag==null){
        return tag
    }
    for(let key in tag){
        //key》name
        console.log("data的对象:"+tag);
        console.log("key>name:"+key);
        console.log("值:"+tag[key]);
        defineReactive(tag,key,tag[key]);//重新定义属性和值
    }
  
}
//3.使用Object.defineProperty.重新定义数据，给数据增加getter和setter


function defineReactive(tag,key,val){
    observer(val);//如果数据多层需要再次观察，所以vue2也有一个缺陷，如果数据多层，就好多层递归
    Object.defineProperty(tag,key,{
        get(){//如果数据不更新直接返回原来的值
            console.log("取得数据："+val);


            return val
        },
        set(newVal){
            if(newVal!==val){//新的数据不等于旧值，表示已更新
               observer(newVal);
                //更新视图
                 updateView()
                 val=newVal  
               
            }

        }
    })
}
//4.更新视图
function updateView(val) {
    console.log("更新视图成功");

} 
